
<template>
  <div class="real">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <!------------------------------------------------------评价------------------------------------------------------------------>
      <div class="realBody container">
        <van-cell-group>
          <van-field v-model="username" required clearable label="真实姓名" placeholder="请输入您的真实姓名，认证后不可更改" />

          <van-field v-model="card" label="身份证号" placeholder="请输入您的真实姓名对应的身份证号" required />
        </van-cell-group>
        <h3>上传证件材料</h3>
        <van-row gutter="15">
          <van-col :span="12">
            <van-uploader v-model="cardPositive" multiple :max-count="1" >
            </van-uploader>
            <p>身份证正面</p>
          </van-col>
          <van-col :span="12">
            <van-uploader v-model="cardReverse" multiple :max-count="1">
              <!-- <van-button icon="photo" plain type="info">上传图片</van-button> -->
            </van-uploader>
            <p>身份证国徽面</p>
          </van-col>
          <van-col v-show="IsExperts" :span="12">
            <van-uploader v-model="cardExperts" multiple :max-count="1">
              <!-- <van-button icon="photo" plain type="info">上传图片</van-button> -->
            </van-uploader>
            <p>专家证书</p>
          </van-col>
        </van-row>
        <van-button type="info" size="large">提交</van-button>
        <p class="promptText">
          <van-icon name="warning-o" />证件必须是清晰彩色原件电子版本。可以是扫描件或者数
          码拍摄照片。支持jpg、png、jpeg的图片格式
        </p>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
export default {
  name: 'real',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '实名认证',
      MianLoading: false,
      count: 0,
      username: '', // 用户真实姓名
      card: '', // 用户身份证号
      cardPositive: [], // 正面身份证
      cardReverse: [], // 背面身份证
      IsExperts: false,
      cardExperts: [] // 背面身份证
    }
  },

  computed: {},

  watch: {},

  created () {
    // 判断URL传值认证身份是什么。
    if (this.$route.query.type === 'experts') {
      console.log(this.$route.query.type)
      this.IsExperts = true
      this.WebName = '认证艺术家'
    } else {
      console.log()
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MianLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.real {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .realBody {
      margin-top: 10px;
      h3 {
        font-size: 16px;
        font-weight: 400;
      }
      .van-row {
        margin-bottom: 20px;
        .van-col {
          text-align: center;
          font-size: 12px;
          color: #666666;
          .van-uploader{
            .van-uploader__wrapper{
              .van-uploader__preview{
                .van-uploader__preview-image{
                  width: auto;
                  height: auto;
                }
              }
            }
          }
        }
      }
      .promptText {
        margin-top: 50px;
        font-size: 12px;
        line-height:20px;
        color: #999999;
      }
    }
  }
}
</style>
